<template>
	<view class="wrap">
		<view class="tHeader">
			<g-header title="编辑数量" hideRight>
				<image src="../../static/images/icon-scan.png" style="width:42rpx;height:42rpx"></image>
			</g-header>
		</view>
		<view class="countDH-list">
			<view class="countDH-item">
				<view class="countDH-img">
					<image :src="dhInfo.cover"></image>
				</view>
				<view class="countDH-main">
					<view class="countDH-title app_ellipsis">{{dhInfo.productName}}</view>
					<view class="countDH-mainM">
						<text>￥</text>
						<text>{{dhInfo.price}}</text>
						<text>/{{dhInfo.unit}}</text>
						<text>({{dhInfo.emptyDiff}})</text>
						<text>库存：999</text>
					</view>
					<view class="countDH-tips">起售量必须≥{{dhInfo.startNum}}{{dhInfo.unit}}</view>
				</view>
				<view class="countDH-R">
					<view class="countDH-R_btn" @click="showMDYPriceflag = true">修改单价</view>
				</view>
			</view>
		</view>
		<view class="emptyDiff app_flex-aicjcsb">
			<view class="emptyDiff-label">设置空差</view>
			<view class="emptyDiff-R app_flex-aic">
				<input v-model="customEmptyDiff" placeholder="请输入空差" placeholder-style="color:#ccc"
					@blur="checkCustomEmptyDiff">
				<view class="emptyDiff-unit" @click="showUnitSelectFlag = true">{{customEmptyDiffUnitLabel || '+/-'}}
				</view>
			</view>
		</view>
		<u-select v-model="showUnitSelectFlag" :list="unitSelectList" @confirm="onUnitSelectConfirm"></u-select>
		<view class="detail">
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" @click="click" @open="open"
				:options="options">
				<view class="block">
					<view class="block-L">第{{index/1 + 1}}条</view>
					<view class="block-R">
						<input v-model="dhInfo.dhCountArr[index]" type="number" placeholder="请输入数量"
							placeholder-style="color:#ccc">
						<text>{{dhInfo.unit}}</text>
					</view>
				</view>
			</u-swipe-action>

			<view class="addBlock" @click="addItem">
				<image src="../../static/images/icon-tianjia.png"></image>
				<text>添加</text>
			</view>
		</view>
		<view class="submitBar">
			<veiw class="submitBar-L">
				<view class="submitBar-detail">
					<text>共{{totalCount}}{{dhInfo.unit}}</text>
					<text>共{{dhInfo.dhCountArr.length}}条</text>
				</view>
				<view class="submitBar-total">
					<text>小计：</text>
					<text>￥</text>
					<text>{{totalPrice}}</text>
					<!-- <text>.00</text> -->
				</view>
			</veiw>
			<veiw class="submitBar-R">
				<g-btn title="确认" :customstyle="{width:'200rpx',height: '70rpx'}" @click="onConfirmTap"></g-btn>
			</veiw>
		</view>

		<!-- 修改单价 -->
		<u-popup v-model="showMDYPriceflag" mode="center" z-index="10099" border-radius="10">
			<view class="mdyPricePop">
				<view class="mdyPricePop-header">修改单价</view>
				<view class="mdyPricePop-main">
					<view class="mdyPricePop-input">
						<input v-model="tempPrice" type="number" placeholder="请输入价格" placeholder-class="phcClass">
					</view>
					<view class="mdyPricePop-tips">
						<text>注：</text>
						<text>修改单价只在当前订单生效，不会改变商品正常售价。</text>
					</view>
				</view>
				<view class="mdyPricePop-footer">
					<view class="mdyPricePop-btn" @click="showMDYPriceflag = false">取消</view>
					<view class="mdyPricePop-btn" @click="dhInfo.price = tempPrice, showMDYPriceflag = false">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// list: [{
				// 	show: false
				// }, {
				// 	show: false
				// }, {
				// 	show: false
				// }],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				showMDYPriceflag: false,
				dhInfo: {
					dhCountArr: []
				},
				tempPrice: '',
				customEmptyDiff: '',
				customEmptyDiffUnit: '',
				customEmptyDiffUnitLabel: '',
				showUnitSelectFlag: false,
				unitSelectList: [{
					label: '+',
					value: '1'
				}, {
					label: '-',
					value: '2'
				}, {
					label: '*',
					value: '3'
				}, {
					label: '/',
					value: '4'
				}]
			}
		},
		computed: {
			list() {
				return this.dhInfo.dhCountArr.map(item => {
					return {
						value: item,
						show: false
					}
				})
			},
			totalCount() {
				let count = this.dhInfo.dhCountArr.reduce((total, item) => {
					console.log('this.calcDhCountItem(item)', this.calcDhCountItem(item));
					return total/1 + this.calcDhCountItem(item) / 1
				}, 0)
				return count.toFixed(1)
			},
			totalPrice() {
				return this.dhInfo.dhCountArr.reduce((total, item) => {
					return total/1 + this.calcDhCountItem(item) * this.dhInfo.price
				}, 0).toFixed(1)
			}
		},
		onLoad(options) {
			let dh = JSON.parse(options.dh)
			this.customEmptyDiffUnit = dh.customEmptyDiffUnit
			this.customEmptyDiff = dh.customEmptyDiff
			dh.dhCountArr = this.inverseDhCount(dh.dhCountArr)
			this.dhInfo = dh
			console.log(this.dhInfo);
		},
		methods: {
			click(index, index1) {
				this.dhInfo.dhCountArr.splice(index, 1);
				this.$nextTick(() => {
					this.list[index].show = true;
					this.list.map((val, idx) => {
						this.list[idx].show = false;
					})
					
				})
			},
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			/**
			 * 添加新条项
			 */
			addItem() {
				// this.list.push({
				// 	show: false
				// })
				this.dhInfo.dhCountArr.push('')
			},
			onConfirmTap() {
				if (this.dhInfo.dhCountArr?.length === 0) {
					uni.showToast({
						title: '请添加数量',
						icon: 'none'
					})
					return
				}
				if (!this.customEmptyDiff) {
					uni.showToast({
						title: '请输入空差',
						icon: 'none'
					})
					return
				}
				if (!this.customEmptyDiffUnit) {
					uni.showToast({
						title: '请选择空差单位',
						icon: 'none'
					})
					return
				}
				this.dhInfo.customEmptyDiff = this.customEmptyDiff
				this.dhInfo.customEmptyDiffUnit = this.customEmptyDiffUnit
				const tempDhInfo = this.$deepClone(this.dhInfo)
				tempDhInfo.dhCountArr = this.calcDhCount(tempDhInfo.dhCountArr)
				console.log(tempDhInfo);
				uni.$emit('update-dhInfo', tempDhInfo)
				uni.navigateBack()
			},
			/**
			 * 根据空差和单位计算
			 */
			calcDhCount(arr) {
				if (!this.customEmptyDiffUnit || (!this.customEmptyDiff && this.customEmptyDiff !== 0)) {
					return []
				}
				return arr.map(item => {
					return this.calcDhCountItem(item)
				})
			},
			calcDhCountItem(val) {
				if (!this.customEmptyDiffUnit || (!this.customEmptyDiff && this.customEmptyDiff !== 0)) {
					return val
				}
				if (this.customEmptyDiffUnit == 1) {
					val = val / 1 + this.customEmptyDiff / 1
				} else if (this.customEmptyDiffUnit == 2) {
					val -= this.customEmptyDiff
				} else if (this.customEmptyDiffUnit == 3) {
					val *= this.customEmptyDiff
				} else if (this.customEmptyDiffUnit == 4) {
					if (this.customEmptyDiff === 0) {
						uni.showToast({
							title: '分母不能为0',
							icon: 'none'
						})
						return val
					}
					// val /= this.customEmptyDiff
					val = Math.floor(val * 100 / this.customEmptyDiff) / 100
					val = val.toFixed(1)
				}
				return val
			},
			inverseDhCount(arr) {
				if (!this.customEmptyDiffUnit || (!this.customEmptyDiff && this.customEmptyDiff !== 0)) {
					return []
				}
				return arr.map(item => {
					if (this.customEmptyDiffUnit == 1) {
						item -= this.customEmptyDiff
					} else if (this.customEmptyDiffUnit == 2) {
						item = item / 1 + this.customEmptyDiff / 1
					} else if (this.customEmptyDiffUnit == 3) {
						if (this.customEmptyDiff === 0) {
							uni.showToast({
								title: '分母不能为0',
								icon: 'none'
							})
							return item
						}
						// item /= this.customEmptyDiff
						item = Math.floor(item * 100 / this.customEmptyDiff) / 100
						item = item.toFixed(1)
					} else if (this.customEmptyDiffUnit == 4) {
						item *= this.customEmptyDiff
					}
					return item
				})
			},
			onUnitSelectConfirm(e) {
				this.customEmptyDiffUnit = e[0].value
				this.customEmptyDiffUnitLabel = e[0].label
			},
			checkCustomEmptyDiff() {
				if (!this.$verificationPositiveNumber.test(this.customEmptyDiff)) {
					uni.showToast({
						title: '请输入数字',
						icon: 'none'
					})
					this.customEmptyDiff = ''
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-top: calc(var(--status-bar-height) + 98rpx);
		padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
	}

	.tHeader {
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		border-bottom: 1px solid $g-border-color;
		z-index: 10086;
	}

	.countDH-list {
		background-color: #fff;
	}

	.countDH-item {
		width: 750rpx;
		display: flex;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.countDH-img {
		width: 120rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
		font-size: 0;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			background-color: $g-main-bg;
		}
	}

	.countDH-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.countDH-title {
		max-width: 390rpx;
		font-size: 24rpx;
	}

	.countDH-mainM {
		text {
			&:first-child {
				font-size: 20rpx;
				color: #ff4c4c;
			}

			&:nth-child(2) {
				font-size: 28rpx;
				color: #ff4c4c;
			}

			&:nth-child(3) {
				font-size: 20rpx;
				color: #ff4c4c;
			}

			&:nth-child(4) {
				font-size: 20rpx;
				color: #999;
			}

			&:nth-child(5) {
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.countDH-tips {
		font-size: 24rpx;
		color: #999;
	}

	.countDH-R {
		display: flex;
		align-items: center;
	}

	.countDH-R_btn {
		width: 140rpx;
		line-height: 60rpx;
		border: 1px solid $g-border-color;
		border-radius: 30rpx;
		text-align: center;
		font-size: 24rpx;
		color: #333;
	}

	.emptyDiff {
		padding: 0 30rpx;
		margin-top: 20rpx;
		height: 100rpx;
		background-color: #fff;
	}

	.emptyDiff-label {}

	.emptyDiff-R {
		input {
			text-align: right;
		}
	}

	.emptyDiff-unit {
		position: relative;
		margin-left: 26rpx;
		padding-right: 44rpx;

		&::after {
			position: absolute;
			right: 14rpx;
			top: 26rpx;
			transform: translateY(-50%);
			content: '';
			border: 10rpx solid transparent;
			border-top: 10rpx solid #444;
		}
	}

	.detail {
		margin-top: 20rpx;
		background-color: #fff;
	}

	.block {
		width: 750rpx;
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid $g-border-color;
	}

	.block-L {}

	.block-R {
		display: flex;
		align-items: center;

		input {
			text-align: right;
			margin-right: 20rpx;
		}
	}

	.addBlock {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;

		image {
			width: 24rpx;
			height: 24rpx;
		}

		text {
			margin-left: 10rpx;
			color: $g-main-color;
		}
	}

	.submitBar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background: #FFFFFF;
		box-shadow: 0 0 10rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.submitBar-L {
		margin-left: 30rpx;
	}

	.submitBar-detail {
		font-size: 26rpx;
		color: #999;

		text {
			&:nth-child(2) {
				margin-left: 10rpx;
			}
		}
	}

	.submitBar-total {
		text {
			color: #FF4C4C;

			&:nth-child(1) {
				font-size: 26rpx;
				color: #333;
			}

			&:nth-child(2) {
				font-size: 20rpx;
			}

			&:nth-child(3) {
				font-size: 26rpx;
			}

			&:nth-child(4) {
				font-size: 20rpx;
			}
		}
	}

	.submitBar-R {
		margin-right: 30rpx;
	}

	.mdyPricePop {
		width: 600rpx;
	}

	.mdyPricePop-header {
		line-height: 100rpx;
		font-size: 36rpx;
		color: #333;
		text-align: center;
	}

	.mdyPricePop-main {
		padding: 0 50rpx 60rpx;
	}

	.mdyPricePop-input {
		margin: 10rpx 0 30rpx;

		input {
			border: 1px solid #e6e6e6;
			height: 90rpx;
			border-radius: 10rpx;
			padding: 0 30rpx;
		}

		::v-deep .phcClass {
			color: #ccc;
		}
	}

	.mdyPricePop-tips {
		font-size: 24rpx;
		color: #999;
		display: flex;

		text {
			display: block;
		}
	}

	.mdyPricePop-footer {
		display: flex;
		border-top: 1px solid $g-border-color;
	}

	.mdyPricePop-btn {
		flex: 1;
		line-height: 100rpx;
		text-align: center;

		&:first-child {
			position: relative;
			font-size: 32rpx;

			&::after {
				position: absolute;
				right: 0;
				top: 50%;
				content: '';
				width: 2rpx;
				height: 60rpx;
				transform: translateY(-50%);
				border-radius: 2rpx;
				background-color: $g-main-bg;
			}
		}

		&:last-child {
			font-size: 32rpx;
			color: $g-main-color;
		}
	}
</style>
